<template>
    <view class="xh-view">
        <view @click="showPopup" class="select-group">
            <u-input :border="false" placeholder="点击添加" v-if="!dataValue.length" :disabled="true" @click="showPopup"></u-input>
            <u-tag v-else :text="item.name + '(' + item.mobile + ')'" style="min-width: 150rpx;margin: 10rpx 10rpx 10rpx 0;text-align: center;" type="primary"
                mode="dark" v-for="(item,index) in dataValue" :key="index" closeable @close="deleteValue(index)"></u-tag>
        </view>
        <view>
            <u-popup class="my-popup" v-model="showTable" mode="bottom" :closeable="true" close-icon-pos="top-right"
                border-radius="10" close-icon-color="#c0c4cc" close-icon-size="40">
                <component is="ContactsRelativeCreate" v-if="crmType == 'contacts' && showTable" :index="index" :item="item"
                    :value="dataValue" :disabled="disabled" :relation="relation" @value-change="fieldValueChange" :radio="radio"
                    @close-table="closeTable">
                </component>
            </u-popup>
        </view>
    </view>
</template>

<script>
    import ContactsRelativeCreate from '@/pages/customerManagement/common/components/ContactsRelativeCreate.vue';
    export default {
        data() {
            return {
                showTable: false,
                dataValue: [],
                closeable: true,
                search: ''
            }
        },
        props: {
            /** 值 */
            value: {
                type: [Array, String],
                default: () => {
                    return []
                }
            },
            /** 索引值 用于更新数据 */
            index: Number,
            /** 包含数据源 */
            item: Object,
            /**
             *  多选按钮
             */
            radio: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            /** 自定义数据源 */
            relation: Object,
        },
        watch: {
            value(val){
                this.dataValue = val;
            }
        },
        created() {
            this.dataValue = this.value;
        },
        components: {
            ContactsRelativeCreate,
        },

        computed: {
            crmType() {
                return this.item.relation.actionType
            },
        },
        onShow() {

        },
        methods: {
            showPopup() {
                let self = this;
                let relation = self.item.relation;
                this.scrollTop = 0;
                self.showTable = true;
            },
            
            closeTable() {
                this.showTable = false;
            },

            fieldValueChange(value) {
                if(value && this.crmType == 'contacts'){
                    this.dataValue.push(this.handleData(value));
                }
                
                let data = {
                    index: this.index,
                    fieldName: this.item.data.fieldName,
                    value: this.dataValue
                }
                this.$emit('value-change', data)
            },
             
            handleData(param){
                let item = {};
                item = this.$u.deepClone(param.entity);
                if(param.field && param.field.length){
                    param.field.map(fd => {
                        item[fd.name] = fd.value;
                    })
                }
                console.log(item);
                return item;
            },
             
            deleteValue(index) {
                this.dataValue.splice(index, 1);
                this.fieldValueChange();
            },

        }
    }
</script>

<style lang='scss' scoped>
    .xh-view {
        width: 100%;
    }

    .my-popup /deep/ .u-close--top-right {
        top: 20rpx !important;
    }
    
    .my-popup /deep/ .u-drawer-content{
        height: 75% !important;
    }

    .create-menu {
        position: relative;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 5px 5px 0 0;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .menu-title {
        text-align: center;
        height: 80rpx;
        font-size: 35rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #efeff4;
    }

    .menu-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-item {
        width: 120rpx;
        height: 120rpx;
        font-size: 22rpx;
        line-height: 120rpx;
        text-align: center;
        background-color: orange;
        color: #FFFFFF;
        border-radius: 5px;
        margin-right: 10px;
    }

    .select-group {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
</style>
